<template>
    <div>
        <h1>工资管理</h1>
        <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="SelectZhichuId()" size="small">查询搜索</el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
            <el-select checked v-model="formInline.region" placeholder="搜索类型">
              <el-option  label="查询编号" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索内容">
            <el-input v-model="formInline.user" placeholder="请输入搜索内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!--  -->
     <!-- <button @click="mmm">11111111</button> -->
    <!--  -->
        <div class="tab">
            <el-table
            :data="currentData"
            border
            style="width: 100%">
                <el-table-column prop="id" label="编号"  width="200%"></el-table-column>
                <el-table-column prop="name" label="姓名" width="200%"></el-table-column>
                <el-table-column prop="jobId" label="职位" width="200%"></el-table-column>
                <el-table-column prop="updateTime"  label="日期" :formatter="dateFormatter" width="200%"   ></el-table-column>
                <el-table-column prop="baseSalary" label="工资" width="200%"></el-table-column>
                <el-table-column prop="payState" label="是否已派发工资" width="200%"></el-table-column>
                <!--  -->
                <el-table-column
              label="操作"
              width="270%">
            <template slot-scope="scope">
              <el-button type="primary" class="paifa" size="small" 
              disabled v-if="scope.row.payState == '是'" >派发工资</el-button> 
              <el-button type="primary" class="paifa" size="small" 
              @click="handleEdit2(scope.$index, scope.row)" v-else-if="scope.row.payState == '否'">派发工资</el-button>  
            </template>
                </el-table-column>
            </el-table>   
        </div>
        <div class="block">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="this.pageNum"
        :page-size="this.pageSize"
        :pager-count="this.pageCount"
        @current-change="changePage"
        :current-page="currentPage"
        class="fen"
      ></el-pagination>
    </div>
        <!--  -->
    </div>
    
</template>
<script>
import http from '../../http/http'
import {mapActions} from 'vuex'
export default {
    name:'Wage',
    data(){
        return{
            currentPage:1,
            pageSize:5,
            pageCount:7,
            formInline: {
                user: "",
                region: ""
            },
            input:'',
            tableData2: [],
            // Dialog对话框
        }
    },
     computed:{
        currentData(){
          let start = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          this.$store.state.ljnStore.tableData2.forEach(item =>{
            if(item.jobId == '1'){
              item.jobId = '服务员'
            }else if(item.jobId == '2'){
              item.jobId = '电工'
            }else if(item.jobId == '3'){
              item.jobId = '会计'
            }else if(item.jobId == '4'){
              item.jobId = '管理员'
            }
          })
          return  this.$store.state.ljnStore.tableData2.slice(start,end);
        },
        pageNum(){
          return this.$store.state.ljnStore.tableData2.length;
        }
    },    
    created(){
      this.getStaff()
    },
    methods:{
      ...mapActions(['getStaff']),
        //这是搜索按钮
        SelectZhichuId() { //------------------------------这是搜索按钮
          let user = this.formInline.user
          let region = this.formInline.region  
          if(user != '' && region != '' ){//------------------------------搜索ajax
            http({
              url:'/mgrsite/Account/lookUpStaff',
              method:'post',
              data:{
                  "inputValue": this.formInline.user,
              }
          }).then(res =>{
            console.log(res.data)
            this.$store.state.ljnStore.tableData2 = res.data
          })
          }else{
            this.$confirm("您的查询内容为空！请重新检查后再输入！", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
          }
          
        },
        handleResetSearch() {//------------------------------重置按钮
            this.formInline.user = ''
            this.formInline.region = ''
            this.getStaff()
        },
        handleEdit2(index,row){     //------------------------------派发工资按钮
          console.log(row.id)
          http({
            url:'/mgrsite/Account/paySalary',
            method:'post',
            data:{
              "id": row.id,
            }
          }).then(res =>{
            console.log(res)
            this.getStaff()
          })
        },
        changePage(val){
          this.currentPage = val;
        },
         //------------------------------ 编辑员工
        
        //------------------------------ 关闭Dialog
        handleClose(done) {
          this.$confirm("确认关闭？")
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        //------------------------------ 编辑提交事件
        submitForm(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              // let storeName = this.$refs["myCascader"].checkedValue[0];
              // let jobName = this.$refs["myCascader"].inputValue;
              // console.log(jobName, storeName);
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },  
        mmm(){//------------------------------测试的一个方法（废弃的）
          // ------------------------
          this.$axios({
            url:'/mgrsite/Account/queryStaff',
            method:'post',
            data:{}
          }).then(res =>{
            console.log(res)
          })
          //----------------
          // let date = 'Wed Mar 18 2020 00:00:00 GMT+0800 (中国标准时间)'
          // let nowdate = new Date(date).toLocaleDateString().replace(/\//g,'-')
          // console.log(nowdate)
          // console.log(this.updateTime)
        },

        dateFormatter(row, column) {   //------------------------------转化时间格式的方法
          let datetime = row.updateTime;
            if(datetime){
              datetime = new Date(datetime);
              let y = datetime.getFullYear() + '-';
              let mon = datetime.getMonth()+1 + '-';
              let d = datetime.getDate();
              return y + mon + d;
            }
            return ''
        }, 
    },
    
}
</script>
<style lang="less" scoped>
    .tab{
        margin-top: 1%;
    }
    .center{
        text-align: center !important;
        
    }
    .ll{
        margin-top: 15px;
    }
    .fen{
      margin-top: 10px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .paifa{
      margin-left: 45px;
      width: 150px;
      font-size: 13px;
    }
</style>